
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body style="padding: 12px;">

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
            -webkit-appearance: none;
        }

        .father {
            width: 500px;
            height: 300px;
            border: 1px solid #be1717;
            margin: 50px auto;
        }

        .son {
            width: 500px;
            height: 300px;
            overflow: hidden;
        }

        .son1 {
            animation: upup 1s;
            transform: translateY(0px);
            width: 500px;
            height: 300px;
            background: #282424;
            color: wheat;
        }

        @keyframes upup {
            0% {
                transform: translateY(300px);
                opacity: 1;
            }

            100% {
                transform: translateY(0px);
                opacity: 1
            }
        }

        @keyframes downdown {
            0% {
                transform: translateY(0px);
                opacity: 1;
            }

            100% {
                transform: translateY(300px);
                opacity: 1
            }
        }
    </style>
    </head>
    <div class="father">
        <div class="son">
            <div class="son1">
                <h3>标题标题</h3>
                <p>内容内容内容内容内容内容内容内容</p>
            </div>
        </div>
    </div>



    <h1 style="    font-family: 'DINCOND-MEDIUM';  ">123</h1>


    <input id="search-input"  style="font-size: 32px;"/>
    <script>

 

        // document.getElementsByClassName("son1")[0].classList.
        function debounce(fn, delay) {
            let timerId;
            return function () {
                const args = arguments;
                const context = this;
                clearTimeout(timerId);
                timerId = setTimeout(function () {
                    fn.apply(context, args);
                }, delay);
            };
        }

        // 使用防抖优化 input 搜索框实时查询
        const searchInput = document.getElementById('search-input');
        function search(query) {
            // 发送 Ajax 请求获取搜索结果，并更新 UI
        }

        searchInput.addEventListener('input', debounce(function () {
            const query = searchInput.value;
            console.log(query);
            alert(query)
            search(query);
        }, 500));


 



        
    </script>
</body>

</html>